<template>
  <div class="w-full h-full flex flex-col justify-center items-center bg-cover bg-center" :style="{'background-image': `url(${bg})`}">
    <div class="absolute top-8 left-1/2 transform -translate-x-1/2">
      <p class="text-5xl">{{time}}</p>
      <p class="text-base">{{today}}</p>
    </div>
    <!-- 登陆框 -->
      <div class="w-96 border rounded shadow relative h-80 pt-16" style="background-color: rgba(255,255,255,.5);backdrop-filter: blur(6px);">
        <!-- 头像框 -->
        <div class="absolute rounded-lg overflow-hidden h-24 left-36 -top-12 w-24">
          <img
            class="w-full h-full object-cover object-center"
            src="https://portrait.gitee.com/uploads/avatars/user/662/1988010_haoqianpro_1616230218.png!avatar200" alt="">
        </div>
        <!-- 用户名 -->
        <div class="text-black text-4xl text-center my-8">
          <span>qianjz</span>
        </div>
        <!-- 密码 -->
        <div class="text-center">
          <input type="text" class="w-4/5 h-8 pl-2 rounded outline-none border border-black">
        </div>
        <div class="my-8 text-center" @click="handleLogin">Go</div>
      </div>
    <!-- 页脚 -->
    <div class="absolute bottom-2 text-white">
      <p>QianJZ UI<sup>0.0.1个人版</sup></p>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, onBeforeUnmount, ref, computed } from 'vue'
  import bg from 'assets/images/apple-bg-pic.jpg'
  const weekMap = ['一','二','三','四','五','六','日']
  const timer = ref(null)
  const date = ref(null)
  const time = computed(() => {
    if (date.value) {
      return `${date.value.getHours()}:${date.value.getMinutes()}`
    } else {
      return '00:00'
    }
  })
  const today = computed(() => {
    if (date.value) {
      return `${date.value.getFullYear()}/${date.value.getMonth()+1}/${date.value.getDate()} 星期${weekMap[date.value.getDay()+1]}`
    }
  })
  onMounted(() => {
    timer.value = setInterval(() => {
      date.value = new Date()
    }, 1000)
  })
  onBeforeUnmount(() => {
    clearInterval(timer.value)
  })
  const emit = defineEmits(['logined'])
  const handleLogin = () => {
    emit('logined')
  }
</script>
